<!DOCTYPE html>
<html>
<head>
    <title>Infinite Triangle Resistor Network</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="physics-canvas" width="450" height="450"></canvas>
    <script>
        const canvas = document.getElementById('physics-canvas');
        const ctx = canvas.getContext('2d');

        // Style settings
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 1.5;

        // --- Helper Functions ---
        function midpoint(p1, p2) {
            return { x: (p1.x + p2.x) / 2, y: (p1.y + p2.y) / 2 };
        }

        function drawTriangle(p1, p2, p3) {
            ctx.beginPath();
            ctx.moveTo(p1.x, p1.y);
            ctx.lineTo(p2.x, p2.y);
            ctx.lineTo(p3.x, p3.y);
            ctx.closePath();
            ctx.stroke();
        }
        
        function drawNestedTriangles(p1, p2, p3, depth) {
            if (depth <= 0) {
                // Draw the central dot in the last triangle
                const centroidX = (p1.x + p2.x + p3.x) / 3;
                const centroidY = (p1.y + p2.y + p3.y) / 3;
                ctx.beginPath();
                ctx.arc(centroidX, centroidY, 2.5, 0, 2 * Math.PI);
                ctx.fill();
                return;
            }

            const m1 = midpoint(p1, p2);
            const m2 = midpoint(p2, p3);
            const m3 = midpoint(p3, p1);

            drawTriangle(m1, m2, m3);
            
            // For the second inner triangle (depth=3), place the 'a' labels
            if (depth === 3) {
                const inner_t_v1 = midpoint(m1, m2);
                const inner_t_v2 = midpoint(m2, m3);
                const inner_t_v3 = midpoint(m3, m1);

                ctx.font = 'italic 20px Times New Roman';
                ctx.textAlign = 'center';
                ctx.textBaseline = 'middle';

                // Bottom 'a'
                const pos_a_bottom = midpoint(inner_t_v1, inner_t_v3);
                ctx.fillText('a', pos_a_bottom.x, pos_a_bottom.y + 14);

                // Right 'a'
                const pos_a_right = midpoint(inner_t_v1, inner_t_v2);
                ctx.fillText('a', pos_a_right.x + 12, pos_a_right.y + 6);

                // Left 'a'
                const pos_a_left = midpoint(inner_t_v2, inner_t_v3);
                ctx.fillText('a', pos_a_left.x - 12, pos_a_left.y + 6);
            }

            drawNestedTriangles(m1, m2, m3, depth - 1);
        }

        // --- Main Drawing ---

        // Define dimensions for the outermost triangle
        const sideLength = 360;
        const height = sideLength * Math.sqrt(3) / 2;
        const centerX = canvas.width / 2;
        const topY = 40;
        const bottomY = topY + height;

        const pA = { x: centerX - sideLength / 2, y: bottomY };
        const pB = { x: centerX + sideLength / 2, y: bottomY };
        const pC = { x: centerX, y: topY };

        // Draw the outermost triangle
        drawTriangle(pA, pB, pC);

        // Draw the nested triangles recursively (4 levels deep from the first inner one)
        drawNestedTriangles(pA, pB, pC, 4);

        // --- Labels ---

        // A and B labels
        ctx.font = '24px Times New Roman';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText('A', pA.x - 20, pA.y + 5);
        ctx.fillText('B', pB.x + 20, pB.y + 5);

        // Caption
        ctx.font = '20px "SimSun", "Songti SC"'; // Common Chinese fonts
        ctx.fillStyle = 'black';
        ctx.textAlign = 'center';
        ctx.fillText('电图 4.14.1', centerX, canvas.height - 20);

    </script>
</body>
</html>